<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
#c1{background:#fff; width:400px;height:400px;position:absolute;left:100px;top:100px;}/*宽高写在这里就会有问题*/
</style>
<script type="text/javascript" src="../第十三章事件/eventObject.js"></script>
<script>
window.onload = function(){
	
	var oC=document.getElementById('c1');
	
	//绘制环境相当于画板
	//oC.getContext('3d');//3d立体图像现在还没有完全实现，可以用webgl来代替
	var oGc=oC.getContext('2d');
	
	var eventInstance=new EventFunction();
	
	oC.onmousedown=function(){
		
		var pageX=eventInstance.getPageX(event)-oC.offsetLeft;
			
		var pageY=eventInstance.getPageY(event)-oC.offsetTop;
		
		oGc.moveTo(pageX, pageY);
		
		oC.onmousemove=function(){
			
			var pageX=eventInstance.getPageX(event)-oC.offsetLeft;
			
			var pageY=eventInstance.getPageY(event)-oC.offsetTop;
		
			oGc.lineTo(pageX, pageY);
			
			oGc.stroke();
		};
			
		oC.onmouseup=function(){
		
			oC.onmousedown=null;
			
			oC.onmousemove=null;	
			
		};
		
	};
	
	
	
};
</script>
</head>

<body>
	<canvas id="c1" width="400" height="400">不支持canvas的浏览器显示的内容</canvas><!--默认宽度：300默认高度：150透明度：０（完全透明）-->
</body>
</html>
